Echarts怎么重新渲染

您所在的位置：网站首页 › vue echarts重新渲染 › Echarts怎么重新渲染

Echarts怎么重新渲染

#Echarts怎么重新渲染| 来源: 网络整理| 查看: 265

Echarts怎么重新渲染发布时间：2022-05-30 16:34:08 来源：亿速云阅读：187 作者：iii 栏目：开发技术

这篇文章主要介绍“Echarts怎么重新渲染”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Echarts怎么重新渲染”文章能帮助大家解决问题。

当我点击饼图时，出现相应的内容，并重新渲染饼图展示内容饼图点击事件

this.conechart.on('click', (params) => { params.name });

获取的是点击的对应的板块名利用获取的板块名，去接口调取对应的数据，调取数据是异步调用，所以重新渲染视图要在异步中渲染，否则同步渲染不出数据

var options = this.conechart.getOption() options.series[0].data = res.data this.conechart.setOption(options)

getoption()是获取当前视图配置项进行重新赋值 setoption()是挂载配置项完整代码

initconechart () { this.conechart = this.$echarts.init(document.getElementById('conechart')); const option = { title: { text: '风险占比', // subtext: 'Fake Data', left: '45%', top: "20px", textStyle:{ fontSize:30, } }, tooltip: { trigger: 'item' }, legend: { type: 'scroll', orient: 'vertical', left: 'left', top:5, }, series: [ { name: 'Access From', type: 'pie', radius: '50%', left:"10%", top:"15%", data: this.piedata, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { alignTo: "labelLine", distanceToLabelLine: 10, edgeDistance: "15%" }, labelLayout: { fontSize: "16" } } ] }; this.conechart.setOption(option) this.conechart.on('click', (params) => { if ( this.isshow == 0) { this.getWarnInfoBySecond(params.name) } }); },

if判断是一个开关，控制只能点击一次

// 更新视图 getWarnInfoBySecond(name) { getWarnInfoBySecond(name).then(res => { var options = this.conechart.getOption() options.series[0].data = res.data this.conechart.setOption(options) this.isshow = 1 }) },

关于“Echarts怎么重新渲染”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。

推荐阅读： react路由参数改变不重新渲染页面怎么在Vue中强制组件重新渲染

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

echarts 上一篇新闻：SQL未能删除约束drop constraint问题怎么解决下一篇新闻：html5常见的单双标记是什么猜你喜欢 Xcode的debug和release以及development和distribution证书采用开源的架构提高业务敏捷性混过了2015，依然不知道你要什么？ Volley的Post用法判断字符串中是否包含某个字符与字符串的切割 Json数据出现转义字符/问题 UIImage加载图片 Fragment之间的通信键盘类操作 admob移动广告phonegap插件使用教程

【本文地址】

Echarts怎么重新渲染

Echarts怎么重新渲染

今日新闻

推荐新闻